import React, { useState, useEffect } from "react";
import {
  AppBar,
  Toolbar,
  IconButton,
  Menu,
  MenuItem,
  Typography,
  Button,
  Divider,
} from "@mui/material";
import {
  Add as AddIcon,
  ArrowDownward as DownloadIcon,
  Delete as DeleteIcon,
  Pause as PauseIcon,
  LibraryAddCheck as LibraryAddCheckIcon,
  HelpOutline as HelpOutlineIcon,
} from "@mui/icons-material";
import SortByAlphaSubsScriptIcon from "./SortByAlphaSubsScriptIcon";

function ToolBar({ onAdd, selectedItems, onDownload, onPause, onDelete, onSelectAll, onSort }) {
  const [anchorEl, setAnchorEl] = useState(null);
  const [disabledDownloadIcon, setDisabledDownloadIcon] = useState(true);

  useEffect(() => {
    if (selectedItems.size > 0) {
      setDisabledDownloadIcon(false);
    } else {
      setDisabledDownloadIcon(true);
    }
  }, [selectedItems.size]);

  const handleMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  const handleMenuItemClick = (sortBy) => {
    onSort(sortBy);
    handleMenuClose();
  };
  const handleAdd = () => {
    onAdd();
  };
  const handleDownload = () => {
    if (selectedItems.size > 0) {
      onDownload(Array.from(selectedItems));
    }
  };
  const handlePause = () => {
    if (selectedItems.size > 0) {
      onPause(Array.from(selectedItems));
    }
  };
  const handleDelete = () => {
    if (selectedItems.size > 0) {
      onDelete(Array.from(selectedItems));
    }
  };
  const handleSelectAll = () => {
    onSelectAll();
  };
  const handleHelp = () => {
    // 可以在这里添加帮助功能的实现
    console.log('帮助按钮被点击');
  };
  return (
    <AppBar position="static">
      <Toolbar>
        <IconButton edge="start" color="inherit" aria-label="menu" onClick={handleAdd}>
          <AddIcon />
          <Typography variant="subtitle1" sx={{ color: 'white', borderRadius: 1 }}>
            新建
          </Typography>
        </IconButton>
        <Divider orientation="vertical" variant="middle" flexItem sx={{ bgcolor: 'white', mx: 2, mt: '20px', height: '24px' }} />
        <IconButton
          edge="start"
          color="inherit"
          aria-label="download"
          sx={{ margin: '0 0' }}
          disabled={disabledDownloadIcon}
          onClick={handleDownload}
        >
          <DownloadIcon />
        </IconButton>
        <IconButton
          edge="start"
          color="inherit"
          aria-label="pause"
          sx={{ margin: '0 0' }}
          onClick={handlePause}
          disabled={selectedItems.size === 0}
        >
          <PauseIcon />
        </IconButton>
        <IconButton
          edge="start"
          color="inherit"
          aria-label="delete"
          sx={{ margin: '0 0' }}
          onClick={handleDelete}
          disabled={selectedItems.size === 0}
        >
          <DeleteIcon />
        </IconButton>
        <Divider orientation="vertical" variant="middle" flexItem sx={{ bgcolor: 'white', mx: 2, mt: '20px', height: '24px' }} />
        <IconButton
          edge="start"
          color="inherit"
          aria-label="LibraryAddCheck"
          sx={{ margin: '0 0' }}
          onClick={handleSelectAll}
        >
          <LibraryAddCheckIcon />
        </IconButton>
        <IconButton edge="start" color="inherit" aria-label="SortByAlpha" onClick={handleMenuOpen} sx={{ margin: '0 8px', position: 'relative' }}>
          <SortByAlphaSubsScriptIcon />
        </IconButton>
        <IconButton edge="start" color="inherit" aria-label="HelpOutline" sx={{ margin: '0 0' }} onClick={handleHelp}>
          <HelpOutlineIcon />
        </IconButton>
        <Menu
          anchorEl={anchorEl}
          open={Boolean(anchorEl)}
          onClose={handleMenuClose}
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'right',
          }}
          transformOrigin={{
            vertical: 'top',
            horizontal: 'left',
          }}
        >
          <MenuItem onClick={() => handleMenuItemClick('name')}>按文件名</MenuItem>
          <MenuItem onClick={() => handleMenuItemClick('size')}>按文件大小</MenuItem>
          <MenuItem onClick={() => handleMenuItemClick('progress')}>按进度</MenuItem>
          <MenuItem onClick={() => handleMenuItemClick('speed')}>按下载速度</MenuItem>
          <MenuItem onClick={() => handleMenuItemClick('remainingTime')}>按剩余时间</MenuItem>
        </Menu>
      </Toolbar>
    </AppBar>
  );
};

export default ToolBar;
